<template>
  <view class="content">
    <view class="row-input">
      <text class="name">+86</text>
      <input
        v-model="form.mobile"
        placeholder="请输入手机号"
        type="number"
        maxlength="11"
      />
    </view>
    <view class="row-input">
      <text class="name">验证码</text>
      <input
        placeholder="输入验证码"
        maxlength="6"
        type="number"
        v-model="form.code"
      />
      <view class="code" @click="getCodeClick">
        <text v-if="state.timeShow">获取验证码</text>
        <text v-else>{{ state.count }} s 后获取</text>
      </view>
    </view>
    <view class="row-input">
      <text class="name">输入密码</text>
      <input
        placeholder="请输入密码"
        type="password"
        maxlength="16"
        v-model="form.password"
      />
    </view>
    <view class="row-input">
      <text class="name">确认密码</text>
      <input
        placeholder="再次输入您的密码"
        type="safe-password"
        maxlength="16"
        v-model="form.re_password"
      />
    </view>
    <view class="row-input" v-if="state.type === '0'">
      <text class="name">邀请码</text>
      <input
        placeholder="请输入邀请码"
        type="safe-password"
        maxlength="16"
        v-model="form.invite_mobile"
      />
    </view>
    <view class="tip-link">
      <u-checkbox v-model="state.linkCheck" />
      <text>我同意并接受</text>
      <text class="link" @click="artic">《用户协议和政策》</text>
    </view>
    <view class="register-btn" @click="registerClick">{{
      state.type === '0' ? '注册' : '找回密码'
    }}</view>
  </view>
</template>

<script lang="ts" setup>
import {
  register,
  sendCode,
  changePassword,
  getArticleDetail
} from '@/api/modules/user'
import { reactive, ref, onBeforeUnmount } from 'vue'
import { isMobile, pwdCheck, pwdAgainCheck } from '@/utils/validate'
import { onLoad } from '@dcloudio/uni-app'
const state = reactive({
  // 倒计时
  countDownTime: 60,
  timer: null,
  timeShow: true,
  count: 0,
  linkCheck: false,
  content: '',
  code: '',

  type: '0' // 注册0 找回密码 1
})
const form = reactive({
  invite_mobile: '',
  mobile: '',
  code: '',
  password: '',
  re_password: ''
})
onLoad((options) => {
  state.type = options.type as string
  form.invite_mobile = options.code as string
  console.log(state.type)
})
getArticleDetail({ article_id: '1' }).then((result) => {
  state.content = result.data.content
})
//用户协议
const artic = () => {
  uni.navigateTo({
    url: `/pages/webview/index?url=${state.content}&type=2`
  })
}

const registerClick = () => {
  if (!validate()) return
  if (!state.linkCheck) {
    uni.showToast({
      title: '请同意并接收用户协议',
      icon: 'error'
    })
    return
  }
  uni.showLoading({
    title: '加载中',
    mask: true
  })
  const promise = state.type === '0' ? register(form) : changePassword(form)
  promise
    .then((res) => {
      uni.hideLoading()
      uni.showToast({
        title: '操作成功,请登录',
        icon: 'success'
      })
      uni.navigateTo({
        url: '/pages/login/index'
      })
    })
    .catch((err) => {
      uni.hideLoading()
      uni.showToast({
        title: err.data.message,
        icon: 'error'
      })
    })
    .finally(() => {})
}

//获取短信验证码
const getCodeClick = () => {
  if (!isMobile(form.mobile)) {
    uni.showToast({
      title: '请输入正确的手机号',
      icon: 'error'
    })
    return false
  }
  sendCode(form.mobile).then((res) => {
    state.code = res.data
    if (!state.timer) {
      state.count = state.countDownTime
      state.timeShow = false
      state.timer = setInterval(() => {
        if (state.count > 0 && state.count <= state.countDownTime) {
          state.count--
          console.log('count----', state.count)
        } else {
          state.timeShow = true
          clearInterval(state.timer as any)
          state.timer = null
        }
      }, 1000) as any
    }
    uni.showToast({
      title: '验证码发送成功,请注意查收',
      icon: 'success'
    })
  })
}
//校验
const validate = () => {
  if (!isMobile(form.mobile)) {
    uni.showToast({
      title: '请输入正确的手机号',
      icon: 'error'
    })
    return false
  }
  if (!pwdCheck(form.password)) {
    uni.showToast({
      title: '密码不能小于6位数，不能大于16位数 ',
      icon: 'error'
    })
    return false
  }
  if (!pwdAgainCheck(form.password, form.re_password)) {
    uni.showToast({
      title: '请检查两次输入密码是否一致',
      icon: 'error'
    })
    return false
  }
  return true
}
onBeforeUnmount(() => {
  clearInterval(state.timer as any)
})
</script>

<style lang="scss" scoped>
.content {
  margin-top: 100rpx;
  padding: 40rpx;

  .row-input {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 110rpx;
    padding: 0 30rpx;
    background-color: #2b2f41;
    border-radius: 8rpx;
    margin-bottom: 50rpx;
    font-size: 30rpx;

    .name {
      width: 150rpx;
      letter-spacing: 4rpx;
      color: #ffffff;
    }

    input {
      flex: 1;
      color: #a1a2a3;
    }

    .code {
      display: flex;
      justify-content: flex-end;
      letter-spacing: 2rpx;
      width: 180rpx;
      color: #1e70fe;
    }
  }

  .register-btn {
    margin-top: 60rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 35rpx;
    letter-spacing: 15rpx;
    color: #ffffff;
    height: 110rpx;
    border-radius: 240rpx;
    background-image: linear-gradient(to right, #7e50d7, #2138cd);
  }

  .tip-link {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: #ffffff;
    letter-spacing: 4rpx;
    font-size: 28rpx;

    .link {
      color: #007aff;
    }
  }
}
</style>
